// vue-4.x：
import { createRouter, createWebHistory } from 'vue-router';


// 配置路由规则
const routes = [
    {
        path: "/testa",
        name: "testa",
        component: () => import("../components/07router-hook/test-a"),
        props: route => route.query
        
    },
    {
        path: "/testb",
        name: "testb",
        component: () => import("../components/07router-hook/test-b"),
        props: route => route.query
        
    },
    {
        path: "/error/:msg",
        name: "error",
        component: () => import("../components/07router-hook/test-error"),
        props: route => route.params
        
    },
    {
        path: "/not-found",
        name: "not-found",
        component: () => import("../components/06redirect/not-found"),
        
    },
    // 上面规则如果都没有匹配上，采用下面的模糊匹配：重定向到404页面
    {
        path: '/:pathMatch(.*)*',
        redirect: '/not-found'
    }
]

// 创建路由对象
const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes
});

// 函数如果没有回（或者返回true），那么表示路由被确保（会去往目标组件），
// 如果返回false，可以阻止去往目标页面
// router.beforeEach((to,from) => {
//     console.log("to:",to);
//     console.log("from:",from);
//     if (!to.query.name) {
//         console.log("没有传入name，进入失败！");
//         return false;
//     }
// })

// 返回路由地址或者对象，可以去往其它页面
// router.beforeEach((to,from) => {
//     // 避免不断循环
//     if (to.fullPath.startsWith("/error")) {
//         return true;
//     }
//     console.log("to:",to);
//     console.log("from:",from);
//     if (!to.query.name) {
//         console.log("没有传入name，进入400页面！");
//         return {name: "error",params: {msg: "name为空！"}};
//     }
// })

// 还可以传第三个next参数，第三个参数是一个函数，调用之后表示路由被确保
// next()可以传入字符串表示目标url，也可以传入路由对象
// 注意！！！如果用了next()；请确保任何一个逻辑支路都调用了next()
router.beforeEach((to,from,next) => {
    // 避免不断循环
    if (to.fullPath.startsWith("/error")) {
        next();
        return;
    }
    console.log("to:",to);
    console.log("from:",from);
    if (!to.query.name) {
        console.log("没有传入name，进入400页面！");
        next({name: "error",params: {msg: "name为空！"}});
    } else {
        next();
    }
})

// 导出路由对象
export default router;